<template>
  <div class="content">
    <div class="">
      <div class="left">
        <div class="top">
          <div class="icon">
            <svg-icon
              style="font-size: 2.5vh"
              icon-class="today1"
            />
          </div>
          <div class="title">今日用电(kWh)</div>
          <div class="number">11</div>
          <div class="ratio">
            <div>昨日同期 11</div>
            <div :class="{ isUp: true, down: isDown }">
              11
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="icon">
            <svg-icon
              style="font-size: 2.5vh"
              icon-class="today0"
            />
          </div>
          <div class="title">实时负荷(kW)</div>
          <div class="number">11</div>
          <div class="ratio">
            <div>昨日同期 11</div>
            <div :class="{ isUp: true, down: isDown1 }">
              11
            </div>
          </div>
        </div>
      </div>
      <div class="center">
        <div style="padding: 0 2%; height: 100%">
          <div class="tab">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item.value" :name="item.name">
                <div class="wrap" />
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="chart" />
        </div>
      </div>
      <div class="right">
        <div class="title">站点信息</div>
        <ul>
          <li>01</li>
          <li>01</li>
          <li>01</li>
          <li>01</li>
          <li>01</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: '1#进线电流',
      tabs: [{
        value: '1#进线电流',
        name: '1#进线电流'
      }, {
        value: '2#进线电流',
        name: '2#进线电流'
      }, {
        value: '3#进线电流',
        name: '3#进线电流'
      }]
    }
  },
  computed: {
    isDown() {
      if ('+71.56%'.slice(0, 1) === '-') {
        return true
      }
      return ''
    },
    isDown1() {
      if ('+71.56%'.slice(0, 1) === '-') {
        return true
      }
      return ''
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab.name)
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
    padding: 1% 0;
    height: 46%;
    color: #fff;
    > div {
        height: 100%;
        display: flex;
        .left {
            width: 23%;
            display: flex;
            flex-direction: column;

            > div {
                flex: 1;
                background: #1e3641;
                border-radius: 20px;
                box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.16);
                margin-bottom: 20px;
                padding: 0 1vw;
                position: relative;

                .icon {
                    position: absolute;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    align-content: center;
                    background: #28a3a8;
                    padding: 0.5vh;
                    border-radius: 50%;
                    right: 0.8vw;
                    top: 1.5vh;
                }

                .title {
                    padding: 6% 0 0% 0;
                    color: #cccccc;
                    letter-spacing: 0.1vw;
                    font-size: 1.8vh;
                }

                .number {
                    font-size: 3.3vh;
                    color: #fff;
                    font-weight: bold;
                    padding: 5% 0;
                }

                .ratio {
                    display: flex;
                    font-size: 1.5vh;

                    :nth-child(1) {
                        margin-right: 1vw;
                    }

                    .isUp {
                        color: #d9001b;
                        font-weight: bolder;
                    }

                    .down {
                        color: #21b351;
                    }
                }
            }

            > div:last-child {
                margin-bottom: 0;
            }
        }

        .center {
            width: 48%;
            margin: 0 1%;
            background: #252735;
            border-radius: 20px;
            .tab {
                height: 17%;
            }
            .chart {
                height: 80%;
                background: #30323f;
                border-radius: 20px;
            }
        }

        .right {
            flex: 1;
            background: #252735;
            border-radius: 20px;
            padding: 0 1vw;
            .title {
                padding: 6% 0 0% 0;
                color: #cccccc;
                letter-spacing: 0.1vw;
                font-size: 1.8vh;
                height: 13%;
            }
            ul {
                list-style: none;
                padding: 0 10px;
                height: 81%;
                display: flex;
                flex-direction: column;
                li {
                    height: 4vh;
                    line-height: 4vh;
                    border-bottom: 1px solid #5c6d81;
                }
            }
        }
    }
}
</style>
